<template>

  <div style="width:100%;height:240px;padding:20px;">
    <div class="alarm-item">
      <div class="alarm-type">故障</div>
      <div class="alarm-number">{{dataSource[0].count}}个</div>
      <div class="alarm-progress">
        <Progress
          :percent="breakRatio"
          status="success"
        >
          <span>{{breakRatio}}%</span>
        </Progress>
      </div>
    </div>
    <div class="alarm-item">
      <div class="alarm-type">火警</div>
      <div class="alarm-number">{{dataSource[1].count}}个</div>
      <div class="alarm-progress">
        <Progress
          :percent="fireRatio"
          status="wrong"
        >
          <span>{{fireRatio}}%</span>
        </Progress>
      </div>
    </div>
    <div class="alarm-item">
      <div class="alarm-type">预警</div>
      <div class="alarm-number">{{dataSource[2].count}}个</div>
      <div class="alarm-progress">
        <Progress
          :percent="preRatio"
          status="normal"
        >
          <span>{{preRatio}}%</span>
        </Progress>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "dataSourcePie",
  props: {
    LineDataSource: {
      type: Array,
      default: function() {
        return [
          { count: 0, alarmType: "火警" },
          { count: 0, alarmType: "故障" },
          { count: 0, alarmType: "预警" }
        ];
      }
    }
  },
  data() {
    return {
      dataSource: [
        { count: 0, alarmType: "故障" },
        { count: 0, alarmType: "火警" },
        { count: 0, alarmType: "预警" }
      ],
      breakRatio:0,
      fireRatio:0,
      preRatio:0
    };
  },
  computed: {},
  watch: {
    LineDataSource(curVal, oldVal) {
      let vm = this;
      curVal.forEach(val => {
        let alarmType = val.alarmType;
        vm.dataSource[
          vm.dataSource.findIndex(dVal => dVal.alarmType == alarmType)
        ] = val;
      });
      let alarmCount =
        this.dataSource[0].count +
        this.dataSource[1].count +
        this.dataSource[2].count;
      if (alarmCount > 0) {
        this.breakRatio = (this.dataSource[0].count*100 / alarmCount).toFixed(2);
        this.fireRatio = (this.dataSource[1].count*100 / alarmCount).toFixed(2);
        this.preRatio = (this.dataSource[2].count*100 / alarmCount).toFixed(2);
      } else {
        this.breakRatio = 0;
        this.fireRatio = 0;
        this.preRatio = 0;
      }
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.alarm-item {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  line-height: 60px;
  .alarm-type {
    float: left;
    width: 50px;
    color: #aeaeae;
  }
  .alarm-number {
    float: left;
    width: 50px;
    color: #aeaeae;
  }
  .alarm-progress {
    margin-left: 100px;
  }
}
</style>

